@extends('admin.layout.layout')
@section('css')
    <style>
        .td-manage a {
            margin: 0 5px;
        }

        .min-width .layui-form-select {
            width: 100px;
        }

        .layui-table-cell{
            text-align: center;
            height: auto;
            white-space: normal;
        }
        .layui-table img{
            max-width: 150px;
        }
    </style>
@endsection
@section('content')
    <div class="x-nav">
          <span class="layui-breadcrumb">
            <a>应用中心</a>
            <a>banner图管理</a>
            <a>
              <cite>banner图列表</cite></a>
          </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
           onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table id="table" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')

    <script >
        layui.use(['form', 'layer', 'table', 'laydate'],
            function () {
                $ = layui.jquery;
                var form = layui.form;
                var table = layui.table;
                var laydate = layui.laydate;
                var where = {};

                form.on('submit(sreach)', function (data) {
                    where = data.field;
                    console.log(where);
                    table.reload('exportTable', {
                        where: where
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false;
                });
                laydate.render({
                    elem: '#use_ticket_time'
                    ,type: 'datetime'
                    ,range: true //或 range: '~' 来自定义分割字符
                });
                form.render();
                table.render({
                    elem: '#table'
                    , id: 'exportTable'
                    , limit: 15
                    , limits: [15, 30, 60, 90]
                    , loading: true
                    , where: where
                    , url:'{{asset('admin/banners')}}' //数据接口
                    , page: true //开启分页
                    , cols: [[ //表头
                         {field: 'img_path', title: 'banner缩略图',templet:function(d){
                           return '<div><img onclick="showBigImg(this)" src="'+'/'+d.img_path+'"></div>'
                         },width: '20%'},
                         {field: 'title', title: '标题',width: '15%'},
                         {field: 'content', title: '内容',width: '25%'},
                         {field: 'created_at', title: '添加时间',width: '15%'}, 
                         {field: '', title: '操作', templet: function (d) {
                                let html = '';
                                html += '<span data-id="' + d.id + '" class="layui-btn layui-btn-sm stop_2 layui-btn-normal"  onclick = "xadmin.open(\'删除\',\'{{asset('admin/banner/delete')}}?id=' + d.id + '\',700,300)">删除</span>';
                                html += '<span class="layui-btn layui-btn-sm" style="background-color: #fdae72" onclick = "xadmin.open(\'编辑\',\'{{asset('admin/banner/edit')}}?id=' + d.id + '\',700,300)">编辑</span>';
                            return html;
                            },
                        },
                    ]]
                   

                });
            });

    </script>
    <script>
        function showBigImg(e)
        {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true, //点击阴影关闭
                area: [$(e).width + 'px', $(e).height + 'px'], //宽高
                content: "<img src=" + $(e).attr('src') + " />"
            });
        }

    </script>
@endsection
